<template>
	<view v-if="seen" class="app">
		<view v-if="seen" class="column center">
			<view class="top column">
				<view class="title">选择VIP套餐</view>


				<scroll-view class="list-scroll noScorll" scroll-x="true">

					<view class="row vip-ce list-scroll-view" v-for="(item,index) in vipList" :key="index"
						@click="changeTab(index)">
						<view :class="{active: index === dindex}" class="vip-select column">
							<view class="name">{{item.name}}</view>
							<view class="price">
								<text class="price-f">￥</text>
								<text>{{Math.round(item.Price)}}</text>
							</view>
						</view>
					</view>
					<!-- 
					<view class="row vip-ce list-scroll-view">
						<view class="vip-select column ttt ">
							<view class="name">孕检体检</view>
							<view class="price">
								<text class="price-f">￥</text>
								<text>288</text>
							</view>
						</view>
					</view> -->





				</scroll-view>





				<view class="select-info">
					<view class="info-title center">
						<view class="ptm center">该套餐所包含的项目</view>
					</view>
					<view>
						<view class="info-content">
							<view class="center info-sel" v-for="(itemt, indextt) in project" :key="'info2-'+indextt">
								<view class="info-y">
								</view>
								<view class="info-wz">{{itemt.title}}, 使用{{itemt.number}}次</view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="bott">
				<view class="bott-title">项目的说明</view>
				<view class="u-content bott-conet">
					<u-parse :lazy-load="true" :html="content"></u-parse>
				</view>
			</view>
			<view v-if="zfan" class="center bott-bb">
				<button :loading="loading" plain class="input-content" @click="wxPayHandler">立即支付</button>
			</view>
		</view>
	</view>

	<vip-succ v-else></vip-succ>
</template>
<script>
	import vipSucc from "./vipsucc.vue"
	import api from '@/api/vip.js'
	export default {
		components: {
			vipSucc
		},
		data() {
			return {
				zfan:true,
				seen: true,
				id: '',
				dindex: 0,
				content: '',
				project: [],
				vipList: [],
				loading: false, // 提交中

			}
		},
		async onLoad() {
			this.loadVipData()
		},
		methods: {
			//微信小程序支付
			async wxPayHandler() {
				this.loading = true
				const openid = uni.getStorageSync('openid');
				const {
					data
				} = await api.orderPay({
					id: this.id,
					openid: openid
				}) //获取订单号

				let orderInfo = await this.getOrderInfo(data) //获取预支付信息
				console.log(orderInfo)
				// 3. 发起支付
				uni.requestPayment({
				...orderInfo,
					success: (res) => {
						uni.showToast({
							title: '支付成功！'
						})
						this.seen = false
						// 跳转到订单页
						this.navTo('/pages/order/order')
					},
					fail: (res) => {
						uni.showModal({
							content: '支付失败，原因：' + res.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false
					}
				})
			},

			getOrderInfo(orderId) {
				return new Promise(async (resolve, reject) => {

					if (orderId) {
						const openid = uni.getStorageSync('openid');
						let orderInfo = await api.getOrderInfoWxpay({
							order: orderId,
							openid: openid
						})

						// let orderInfo = {
						// 	timeStamp: orderInfo.data.timeStamp
						// 	nonceStr: orderInfo.data.nonceStr
						// 	package: orderInfo.data.package
						// 	signType: orderInfo.data.signType
						// 	paySign: orderInfo.data.paySign
						// }

						console.log(orderInfo)
						if (orderInfo) {
							resolve(orderInfo.data)
							return
						} else {
							reject(new Error('获取支付信息失败，原因：' + res.message))
						}

					}

				})
			},
			changeTab(index) {
				this.dindex = index;
				this.id = ''
				this.content = ''
				this.project = []
				this.id = this.vipList[index]['id']
				this.content = this.vipList[index]['content']
				this.project = this.vipList[index]['project']
			},
			async loadVipData() {
				var openid = uni.getStorageSync('openid');
				const {
					code,
					data
				} = await api.getVipList({openid:openid})
				
				if(code==2){
					this.zfan = false
				}
				this.vipList = data
				console.log(this.vipList)
				this.id = data[0]['id']
				this.content = data[0]['content']
				this.project = data[0]['project']
			}
		}


	}
</script>

<style lang="scss">
	.app {
		background: -moz-linear-gradient(top, #A564C3 0%, #F7F7F7 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
		background: -webkit-linear-gradient(top, #A564C3 0%, #F7F7F7 100%);
		background: -o-linear-gradient(top, #A564C3 0%, #F7F7F7 100%);
		background: -ms-linear-gradient(top, #A564C3 0%, #F7F7F7 100%);
		background: linear-gradient(to bottom, #A564C3 0%, #F7F7F7 30%);
		height: 100%;
		width: 100%;

		.list-scroll {
			padding-left: 30rpx;
			padding-right: 20rpx;
			height: 270rpx;
			// background-color: red;
			white-space: nowrap;

			.list-scroll-view {
				display: inline-block;

			}
		}

		// padding-top: 416rpx;
		.top {
			margin-top: 30rpx;

			width: 690rpx;
			height: 670rpx;
			background: #FAFCFF;
			// background: red;
			border-radius: 20rpx;
			align-items: center;


			.title {
				margin-top: 30rpx;
				margin-left: 30rpx;
				width: 206rpx;
				height: 50rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}

			.vip-ce {
				.active {
					background: #FFFCF8 !important;
					border: 1rpx solid #EEC490 !important;
					position: relative !important;

					&:after {
						position: absolute !important;
						width: 0px;
						height: 0px;
						content: " ";
						border-right: 20rpx solid transparent;
						border-top: 20rpx solid transparent;
						border-left: 20rpx solid transparent;
						border-bottom: 20rpx solid #F3D7B1;

						bottom: -45rpx;
						left: 85rpx;
						transform: translateX(-50%);
					}
				}



				.vip-select {

					margin-right: 20rpx;
					margin-top: 30rpx;
					width: 180rpx;
					height: 200rpx;
					background: #FAFCFF;
					border: 1rpx solid #EFEFEF;
					border-radius: 10rpx;
					align-items: center;
					text-align: center;



					.name {
						white-space: normal;
						margin-top: 30rpx;
						width: 160rpx;
						height: 58rpx;
						font-size: 26rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #333333;



					}

					.price {
						margin-top: 30rpx;
						font-size: 44rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #FB5235;

						.price-f {
							width: 15rpx;
							height: 20rpx;
							font-size: 26rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #FC5235;

						}
					}
				}

			}

			.select-info {
				width: 630rpx;
				background: #F3D7B1;
				border-radius: 10rpx;

				.info-title {

					width: 300rpx;
					height: 60rpx;
					// background-color: #007AFF;


					margin-top: 28rpx;
					margin-left: 28rpx;

					background-image: url('~@/static/images/tu_8.png');
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100%;

					.ptm {

						// background-color: #0086B3;
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #F6F4F4;


					}
				}


				.info-content {
					width: 130rpx;
					// height: 26rpx;
					font-size: 26rpx;
					margin-left: 15rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #874F22;
					line-height: 30rpx;



					.info-y {
						width: 20rpx;
						height: 12rpx;
						background: #874F22;
						border-radius: 50%;
					}

					.info-sel {
						height: 35rpx;
						padding-left: 20rpx;
						width: 320rpx;
						margin-bottom: 15rpx;

						.info-wz {
							width: 500rpx;
							padding-left: 20rpx;
							white-space: nowrap;
						}
					}
				}
			}
		}

		.bott {
			width: 690rpx;
			height: 600rpx;
			background: #FAFCFF;
			// background: #007AFF;
			border-radius: 20rpx;
			margin-top: 50rpx;
			margin-bottom: 50rpx;

			.bott-title {
				margin-top: 30rpx;
				margin-left: 30rpx;
				width: 200rpx;
				height: 36rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}

			.bott-conet {
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}
	}

	.bott-bb {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 150rpx;
		width: 610rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #BB73D5, #643A92);
		box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 50rpx;

		.input-content {
			width: 200rpx;
			height: 32rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			border: none;

			.button::after {
				border: none;
			}
		}


	}
</style>
